<template>
  <div class="icon-document">
    <h1>Icon图标</h1>
    <ul class="anticons-list">
      <li v-for="(item, index) in iconList" :key="index">
        <Icon :name="item" size="36" />
        <span class="antclass">
          <span class="ant-badge">{{ item }}</span>
        </span>
      </li>
    </ul>
    <h2>基本用法</h2>
    <div class="exam">
      <Icon name="plus" size="small"></Icon>
      <Icon name="plus"></Icon>
      <Icon name="plus" size="large"></Icon>
      <Icon name="close-circle" size="24" :style="{ color: 'red' }"></Icon>
      <Icon name="check-circle-fill" :size="36" :iClass="'base'"></Icon>
    </div>
    <pre>
        <code class="language-html">
            {{
            `<template>
                <Icon name="plus" size="small"></Icon>
                <Icon name="plus"></Icon>
                <Icon name="plus" size="large"></Icon>
                <Icon name="close-circle" size="24" :style="{ color: 'red' }"></Icon>
                <Icon name="check-circle-fill" :size="36" :iClass="'base'"></Icon>
            </template>
            <style scoped>
                .base {
                    color: pink;
                }
                .base:hover {
                    color: greenyellow;
                }
            </style>`
            }}
        </code>
    </pre>
    <h2>自定义图标</h2>
    <div class="exam">
      <Icon :iClass="'base'" size="36">
        <path
          d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
        />
      </Icon>
    </div>
    <pre>
        <code class="language-html">
            {{
            `<template>
                <Icon :iClass="'base'" size="36">
                    <path
                      d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
                    />
                </Icon>
            </template>
            <style scoped>
                .base {
                    color: pink;
                }
                .base:hover {
                    color: greenyellow;
                }
            </style>`
            }}
        </code>
    </pre>
    <h2>API</h2>
    <section class="easy-markdown">
      <table>
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>name</td>
            <td>图标名称。遵循图标的命名规范</td>
            <td>string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>size</td>
            <td>图标大小。值示例：small/medium/large/24等（数值型，默认是px单位）</td>
            <td>string/number</td>
            <td>1em</td>
          </tr>
          <tr>
            <td>style</td>
            <td>设置图标的样式，例如 <code>color</code></td>
            <td>CSSProperties</td>
            <td>-</td>
          </tr>
          <tr>
            <td>iClass</td>
            <td>设置图标的类名。</td>
            <td>string</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Icon from '/@/components/Icon/index.vue'

const iconList: string[] = [
  'load',
  'edit-square',
  'delete',
  'check',
  'search',
  'plus',
  'check-circle',
  'close-circle',
  'check-circle-fill',
  'close-circle-fill',
]
export default defineComponent({
  name: 'IconDocument',
  components: { Icon },
  setup() {
    return {
      iconList,
    }
  },
})
</script>

<style lang="scss">
.icon-document {
  width: calc(100% - 272px);
  padding: 15px;
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
  ul.anticons-list {
    margin: 10px 0;
    list-style: none;
    overflow: hidden;
    li {
      float: left;
      width: 16.66%;
      text-align: center;
      list-style: none;
      cursor: pointer;
      height: 100px;
      color: #555;
      transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
      position: relative;
      margin: 3px 0;
      border-radius: 4px;
      background-color: #fff;
      overflow: hidden;
      padding: 10px 0 0;
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: 'Copied!';
        text-align: center;
        line-height: 110px;
        color: #fff;
        transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        opacity: 0;
      }
      .antclass {
        display: block;
        text-align: center;
        transform: scale(0.83);
        font-family: Lucida Console, Consolas;
        white-space: nowrap;
        .ant-badge {
          transition: color 0.3s ease-in-out;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5;
          list-style: none;
          font-feature-settings: 'tnum';
          position: relative;
          display: inline-block;
          color: unset;
          line-height: 1;
        }
      }
    }
  }
  .exam {
    margin-left: 80px;
  }
  .language-html {
    overflow: auto;
    display: block;
  }
  // example css:
  .base {
    color: pink;
  }
  .base:hover {
    color: greenyellow;
  }
}
</style>
